<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>添加学生</title>
	<link rel="stylesheet" href="/css/layui.css">
<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="/css/item.css">
	<style>
		.layui-row {
			margin-top: 50px;
		}

		.offer {
			width: 90px;
			height: 35px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 35px;
			font-size: 16px;
			border-radius: 4px;
		}

		.return {
			width: 80px;
			height: 35px;
			background: #0086b6;
			color: white;
			text-align: center;
			line-height: 35px;
			margin-top: -35px;
			margin-left: 130px;
			font-size: 16px;
			border-radius: 4px;
		}
	</style>
</head>

<body>
	

	<div class="layui-row" id="vue-root">
		<div class="layui-col-md6 layui-col-md-offset3">
			<div class="layui-form-item">
				<label class="layui-form-label">班级</label>
				<div class="layui-input-block">
					<select name="class" data-vv-as="班级" class="input_select classteacher" v-model="classesId">
						<option disabled="disabled" :value="null">请选择班级</option>
						<option v-for="classes in classess" :key="classes.id" :value="classes.id" v-text="classes.name">
						</option>
					</select>
					<div class="checkout_state"></div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">学生</label>
				<div class="layui-input-block">
					<select name="studentId" data-vv-as="学生" class="input_select classteacher" v-model="studentId"
						v-validate="'required'">
						<option disabled="disabled" :value="null">请选择学生</option>
						<option v-for="student in students" :key="student.id" :value="student.id" v-text="student.name">
						</option>
					</select>
					<div class="checkout_state" v-text="err('studentId')"></div>
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<div class="offer" @click="submit">立即提交</div>
					<div class="return" onclick="history.back()">取消</div>
				</div>
			</div>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	
	

	<script src="/js/common.js"></script>
	<script src="/js/item.js"></script>

	<script>
		var app = new Vue(merge({
			data: {
				classess: [],
				students: [],
				classesId: null,
				studentId: null
			},
			created: function () {
				axios.get('/pc/classes/all/' + top_params().id).then(function (res) {
					this.classess = res.data;
				}.bind(this));
			},
			methods: {
				submit: function () {
					axios.post('/pc/trip/passenger/' + params().id + '/' + this.studentId).then(function () {
						alert('成功');
						history.back();
					});
				},
			},
			watch: {
				classesId: function (newValue, oldValue) {
					axios.get('/pc/student/all/' + newValue).then(function (res) {
						this.students = res.data;
					}.bind(this));
				}
			}
		}));

	</script>


</body>

</html>